import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  Image,
  TextInput,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import BaseUrl from '../../config/BaseUrl';
import {getTreelist} from '../../service/common';
import styles from './style';
import {Icon} from '@ant-design/react-native';
import Banner from '../../components/Banner';
import SearchHeadIcon from '../../components/SearchHeadIcon';
import Search from '../../components/Search';
import {listByClassif} from '../../service/home';

const CouseMall = () => {
  const navigation = useNavigation();
  const [visible, setVisible] = useState(false);
  const [nodeId, setNodeId] = useState('');
  const [courseList, setCourseList] = useState([]);
  const [classList, setClassList] = useState([]);

  const listByClass = (nodeId) => {
    listByClassif({courseClassif: nodeId, teacherId: ''}).then((res) => {
      console.log(res);
      setClassList(res.rows);
    });
  };

  useEffect(() => {
    navigation.setOptions({
      title: '课程商城',
      headerRight: () => (
        <View style={styles.head_icon}>
          {/* <SearchHeadIcon /> */}
          {/* <TouchableOpacity
            onPress={() => setVisible(true)}
            style={styles.filter_icon_container}>
            <Icon style={styles.icon} name={'filter'} />
          </TouchableOpacity> */}
        </View>
      ),
    });

    getTreelist({type: 1004}).then((res) => {
      // console.log(res);
      const nodeId = res.data[0].nodeId;
      setCourseList(res.data);
      setNodeId(nodeId);
      // 推荐课程
      listByClass(nodeId);
    });
  }, [navigation]);
  const onSure = () => {
    setVisible(false);
  };

  const sendCommentFn = (val) => {
    listByClassif({courseTitle: val}).then((res) => {
      console.log(res);
      setClassList(res.rows);
    });
  };

  return (
    <AreaView>
      <ScrollView style={styles.container}>
        <View style={styles.wrapper_container}>
          <Banner />
        </View>
        <Search onSend={sendCommentFn} />
        <View style={styles.tabs_container}>
          {(courseList || []).map((item) => (
            <TouchableOpacity
              style={styles.btn}
              key={item.nodeId}
              onPress={() => {
                setNodeId(item.nodeId);
                listByClass(item.nodeId);
              }}>
              <Text
                style={[
                  styles.btn_text,
                  nodeId === item.nodeId && styles.btn_text_selected,
                ]}>
                {item.nodeName}
              </Text>
              {nodeId === item.nodeId && <View style={styles.selected} />}
            </TouchableOpacity>
          ))}
        </View>
        <View style={styles.list_container}>
          {(classList || []).map((item) => (
            <TouchableOpacity
              onPress={() =>
                navigation.push('CouseDetail', {
                  courseId: item.courseId,
                })
              }
              style={styles.list}
              key={item.courseId}>
              <Image
                style={styles.cover}
                source={{uri: BaseUrl.imgurl + item?.courseImage}}
              />
              <View style={styles.list_info}>
                <Text numberOfLines={1} style={styles.list_title}>
                  {item.courseTitle}
                </Text>
                <View style={styles.list_time}>
                  <Text style={styles.num_text}>共{item.courseNum}课时</Text>
                  <Text style={styles.time_text}>
                    课程时长：{item.courseHours}
                  </Text>
                </View>
                <View style={styles.list_money_avatar}>
                  <View style={styles.list_money}>
                    <Text style={styles.money}>￥{item.coursePrice}</Text>
                    <Text style={styles.person_num}>
                      {item.courseBuyNum}人购买
                    </Text>
                  </View>
                  <View style={styles.avatar}>
                    <Image
                      style={styles.avatar_img}
                      source={{uri: BaseUrl.imgurl + item.teacherImage}}
                    />
                    <Text style={styles.name}>{item.teacherNam}</Text>
                  </View>
                </View>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
      {visible && (
        <View style={styles.filter_modal}>
          <Text style={styles.filter_title}>分类筛选</Text>
          <View style={styles.class_container}>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>分类一</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>分类一</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>分类一</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>分类一</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>分类一</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>分类一</Text>
            </TouchableOpacity>
          </View>
          <Text style={styles.filter_title}>价格区间</Text>
          <View style={styles.class_container}>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>免费</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>10-50</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list} activeOpacity={1}>
              <Text style={styles.class_list_text}>100-300</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list_money} activeOpacity={1}>
              <Text style={styles.class_list_text}>200-500</Text>
            </TouchableOpacity>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list_money} activeOpacity={1}>
              <Text style={styles.class_list_text}>5000-10000</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.class_container}>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list_money} activeOpacity={1}>
              <TextInput style={styles.class_list_text} placeholder="最低价" />
            </TouchableOpacity>
            <Text>--</Text>
            <TouchableOpacity  activeOpacity={1} style={styles.class_list_money} activeOpacity={1}>
              <TextInput style={styles.class_list_text} placeholder="最高价" />
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            activeOpacity={1}
            style={styles.filter_btn}
            onPress={onSure}>
            <Text style={styles.filter_btn_text}>确定</Text>
          </TouchableOpacity>
        </View>
      )}
    </AreaView>
  );
};

export default CouseMall;
